<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="UTF-8">
    <title>register</title>
    <script th:src="@{https://code.jquery.com/jquery-3.5.1.min.js}"></script>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    html {
                   height: 100%;
                   width: 100%;
                   overflow: hidden;
                   margin: 0;
                   padding: 0;
                   background: url(1.jpg) no-repeat 0px 0px;
                   background-repeat: no-repeat;
                   background-size: 100% 100%;
                   -moz-background-size: 100% 100%;
               }
    body {
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   height: 100%;
               }
    #loginDiv {
                    width: 37%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 650px;
                    background-color: rgba(75, 81, 95, 0.3);
                    box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
                    border-radius: 5px;
                }
    #name_trip {
                   margin-left: 50px;
                   color: red;
               }

    p,
    .sexDiv {
                   margin-top: 10px;
                   margin-left: 20px;
                   color: azure;
        }

    .sexDiv>input,
    .hobby>input {
                 width: 30px;
                 height: 17px;
             }

    input,
    select {
           margin-left: 15px;
           border-radius: 5px;
                      border-style: hidden;
                      height: 30px;
                      width: 140px;
                      background-color: rgba(216, 191, 216, 0.5);
                      outline: none;
                      color: #f0edf3;
                      padding-left: 10px;
               }

   .button {
         border-color: cornsilk;
         background-color: rgba(100, 149, 237, .7);
         color: aliceblue;
         border-style: hidden;
         border-radius: 5px;
         width: 100px;
         height: 31px;
         font-size: 16px;
         }

      .introduce {
                     margin-left: 110px;
                 }

      .introduce>textarea {
                     background-color: rgba(216, 191, 216, 0.5);
                     border-style: hidden;
                     outline: none;
                     border-radius: 5px;
           }

         h1 {
                 text-align: center;
                       margin-bottom: 20px;
                       margin-top: 20px;
                        color: #f0edf3;
               }

           b {
                        margin-left: 50px;
                             color: #FFEB3B;
                             font-size: 10px;
                             font-weight: initial;
                         }
       </style>
    <script>
        function changeVerPic() {
            const src = "/getVerImg?" + new Date().getTime(); //加时间戳，防止浏览器利用缓存
            $('.verifyCode').attr("src", src);
        }
    </script>
    </head>

 <body>
<div id="loginDiv">
      <form action="">
          <h1>REGESTER</h1>
          <p>用户姓名:<input id="userNname" type="text" autofocus required><label id="name_trip"></label></p>

          <p>用户密码:<input id="password" type="password" required><label id="password_trip"></label></p>

          <p>确认密码:<input id="surePassword" type="password" required><label id="surePassword_trip"></label></p>

          <p>请输入验证码：<input type="text" id="verifyCode" name="verifyCode">
          <br>
          <img th:src="@{/getVerImg}" id="ver" class="verifyCode" onclick="changeVerPic()"><br><br></p>

          <p style="text-align: center;">
              <input type="submit" class="button" onblur="checkForm()" onclick="return submitT()" value="注册">
              <input type="reset" class="button" value="重置">
          </p>
      </form>
</div>

 </body>
<script type="text/javascript">
    function trip(obj, trip) {
        document.getElementById(obj).innerHTML = "<b>" + trip + "</b>";
    }
     function checkForm() {
        var trip = document.getElementsByName("em");
        var tripV = trip.innerHTML();
        //获取用户名输入项
        var userNname = document.getElementById("userNname");
        var uName = userNname.value;
         var username = $("#username").val();

         if (!username.match( /^[a-zA-Z]([-_a-zA-Z0-9]{6,20})$/)) {
             var msg = "汉字 英文字母 数字 下划线组成，6-20位";
             $("#usertips").html(msg);
         } else {
             $("#usertips").html('');
         }
     }
        if (uName.length < 8 || uName.length > 20) {
            trip("name_trip", "账号长度为6-20位!!");
        } else {
            trip("name_trip", "OK!!");
        }

        //密码长度大于6 和确认必须一致
        var password = document.getElementById("password");
        var userPass = password.value;
        var username = $("#username").val();

    if (!username.match( /^[a-zA-Z]([-_a-zA-Z0-9]{6,20})$/)) {
        var msg = "汉字 英文字母 数字 下划线组成，6-20位";
        $("#usertips").html(msg);
    } else {
        $("#usertips").html('');
    }
        if (userPass.length < 6|| userPass.length > 20) {
            trip("password_trip", "密码为6-20位!!");
        } else {
            trip("password_trip", "OK!!");
        }

        //获取确认密码框的值 var
        var surePassword = document.getElementById("surePassword");
        var surePass = surePassword.value;
        if (userPass != surePass) {
            trip("surePassword_trip", "两次密码不一致!!");
            return false;
        }
        return true;
    }
    function submitT() {
        if (checkForm()) {
            return true;
        } else {
            return false;
        }
    }
</script>
</html>
